<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由</title>
	</head>
	<body>
		<div id="app">
			
			<a href="http://www.baidu.com">百度</a>
			
			<h1>路由1</h1>
			<!-- <a href/> -->
			<router-link to="/home">家</router-link>
			<router-link to="/house">房子</router-link>
			<!-- 展现区域 -->
			<br />
			<router-link to="/dog">狗</router-link>
			
			<router-link to="/cat">猫</router-link>
			
			<router-view></router-view>
		</div>
		
		<template id="homeTem">
			<div>
				<h1>这里显示家</h1>
			</div>
		</template>
		
		<template id="dogTem">
			<div>
				<h1>这里显示狗</h1>
			</div>
		</template>
		
		<template id="houseTem">
			<div>
				<h1>这里显示房子</h1>
			</div>
		</template>
		
		<template id="catTem">
			<div>
				<h1>这里显示猫</h1>
			</div>
		</template>
	
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script>
			let homeCom={
				// data(){
				// 	return {
						
				// 	}
				// },
				template:"#homeTem"
				
			}
			
			let dogCom={
				// data(){
				// 	return {
						
				// 	}
				// },
				template:"#dogTem"
				
			}
			
			let houseCom={
				// data(){
				// 	return {
						
				// 	}
				// },
				template:"#houseTem"
				
			}
			
			let catCom={
				// data(){
				// 	return {
						
				// 	}
				// },
				template:"#catTem"
				
			}
			
			//拦截请求，映射到组件
			const router=new VueRouter({
				routes:[
				{path:"/home",component:homeCom}
				{path:"/dog",component:dogCom},
				{path:"/house",component:houseCom},
				{path:"/cat",component:catCom}
				]
			})
			
			const app=new Vue({
				el:"#app",
				router//router:router
				
			})
		
		</script>
	</body>
</html>
